<template>
  <div style="width: 100%; height: 100%; display: flex; flex-direction: column">
    <div style="font-size: 20px; color: white; width: 100%; text-align: left">
      系统配置
    </div>
    <div
      style="
        width: 100%;
        flex: 1;
        margin-top: 10px;
        border-radius: 10px;
        background: #1c1c1c;
        border: solid 2px #404040;
        display: flex;
        flex-direction: column;
      "
    >
      <div
        style="
          display: flex;
          align-items: center;
          width: 100%;
          margin-top: 20px;
        "
      >
        <div
          style="
            width: 100px;
            text-align: right;
            height: 30px;
            line-height: 30px;
            color: #b9b9b9;
          "
        >
          资源地址：
        </div>
        <div
          style="
            width: 50%;
            height: 40px;
            background: #303030;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
          "
        >
          <input
            v-model="form.share_dir"
            type="text"
            name=""
            id=""
            style="
              width: calc(100% - 20px);
              background: transparent;
              outline: 0;
              border: 0;
              color: #cbdbd6;
            "
          />
        </div>
      </div>
      <div
        style="
          display: flex;
          align-items: center;
          width: 100%;
          margin-top: 20px;
        "
      >
        <div
          style="
            width: 100px;
            text-align: right;
            height: 30px;
            line-height: 30px;
            color: #b9b9b9;
          "
        >
          转码地址：
        </div>
        <div
          style="
            width: 50%;
            height: 40px;
            background: #303030;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
          "
        >
          <input
            v-model="form.server_dir"
            type="text"
            name=""
            id=""
            style="
              width: calc(100% - 20px);
              background: transparent;
              outline: 0;
              border: 0;
              color: #cbdbd6;
            "
          />
        </div>
      </div>
      <div
        style="
          display: flex;
          align-items: center;
          width: 100%;
          margin-top: 20px;
        "
      >
        <div
          style="
            width: 100px;
            text-align: right;
            height: 30px;
            line-height: 30px;
            color: #b9b9b9;
          "
        >
          转码类型：
        </div>
        <div
          style="
            width: 50%;
            height: 40px;
            background: #303030;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
          "
        >
          <select
            v-model="form.code_type"
            style="
              width: calc(100% - 20px);
              background: transparent;
              outline: 0;
              border: 0;
              color: #cbdbd6;
            "
          >
            <option value="H264" style="color: black">h264 转码效率高</option>
            <option value="H265" style="color: black">h265 带宽要求低</option>
          </select>
        </div>
      </div>
      <div
        style="
          display: flex;
          align-items: center;
          width: 100%;
          margin-top: 20px;
        "
      >
        <div
          style="
            width: 100px;
            text-align: right;
            height: 30px;
            line-height: 30px;
            color: #b9b9b9;
          "
        >
          开机自启：
        </div>
        <div
          style="
            width: 50%;
            height: 40px;
            background: #303030;
            border-radius: 10px;
            display: flex;
            align-items: center;
          "
        >
          <input
            type="checkbox"
            style="margin-left: 10px"
            v-model="form.auto_run"
          />
        </div>
      </div>
      <div
        style="
          display: flex;
          align-items: center;
          width: 100%;
          margin-top: 20px;
        "
      >
        <div
          style="
            width: 100px;
            text-align: right;
            height: 30px;
            line-height: 30px;
            color: #b9b9b9;
          "
        >
          自动登录：
        </div>
        <div
          style="
            width: 50%;
            height: 40px;
            background: #303030;
            border-radius: 10px;
            display: flex;
            align-items: center;
          "
        >
          <input
            type="checkbox"
            style="margin-left: 10px"
            v-model="form.auto_login"
          />
        </div>
      </div>
      <div
        style="
          display: flex;
          align-items: center;
          width: 100%;
          margin-top: 20px;
        "
      >
        <div
          style="
            width: 100px;
            text-align: right;
            height: 30px;
            line-height: 30px;
            color: #b9b9b9;
          "
        >
          AI审核：
        </div>
        <div
          style="
            width: 50%;
            height: 40px;
            background: #303030;
            border-radius: 10px;
            display: flex;
            align-items: center;
          "
        >
          <input
            type="checkbox"
            style="margin-left: 10px"
            v-model="form.censor"
          />
        </div>
      </div>

      <div
        style="
          display: flex;
          align-items: center;
          width: calc(50% + 100px);
          justify-content: center;
          margin-top: 20px;
        "
      >
        <button
          style="
            background: #33a681;
            color: #bed5cd;
            width: 100px;
            height: 40px;
          "
          @click="saveConfig"
        >
          保存配置
        </button>
        <button
          style="
            width: 100px;
            height: 40px;
            margin-left: 30px;
            background: #3a3a39;
            color: #dadada;
          "
        >
          取消
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../axios/request";
export default {
  data() {
    return {
      form: {
        server_dir: null,
        share_dir: null,
        code_type: null,
        auto_run: false,
        auto_login: false,
        censor: false
      },
    };
  },
  methods: {
    async saveConfig() {
      let res = await request({
        url:"/system/api/saveConfig",
        method:"POST",
        data:{
          command:0,
          user_name:localStorage.getItem("user_name"),
          data:[this.form]
        }
      })
      if (res.data.status == 200 && res.data.data.result) {
        this.getConfig()
      }
    },
    async getConfig() {
      let res = await request({
        url: "/system/api/getConfig/" + localStorage.getItem("user_name"),
        method: "GET",
      });
      if (res.data.status == 200) {
        
        this.form = res.data.data.data
      }
    },
  },
  mounted() {
     this.getConfig();
  },
};
</script>

<style></style>